import { Anchor, Radio, Skeleton } from "antd";
import React, { PropsWithChildren, useEffect, useMemo, useState } from "react";
import lawHtmlStr from "../mock/lawHtmlStr";
import { useParams } from "react-router";
import { fetchKgLawDetail } from "@/api/server/recommend_question";
import { useRequest } from "ahooks";
import markdownIt from "markdown-it";
import { randomNumber } from "@/utils";

interface ILawDetailProps {
  className?: string;
}

export function LawDetail(props: PropsWithChildren<ILawDetailProps>) {
  const [type, setType] = useState("1");
  const params = useParams();
  const { data, loading } = useRequest(
    () => {
      const md = new markdownIt();
      return fetchKgLawDetail(params?.id).then((res: any) => {
        if (res?.data?.result?.markdown_content) {
          res.data.result.markdown_html = md.render(
            res?.data?.result?.markdown_content || ""
          );
        }
        return res;
      });
    },
    {
      refreshDeps: [params?.id],
    }
  );

  const titleAndContent = useMemo(() => {
    return [
      {
        key: randomNumber(),
        title: "基本信息",
        content: [
          "发文字号：商务部令2017年第1号",
          "发文机关: 国务院各机构",
          "发布日期: 2017年04月05日",
          "效力级别: 部门规章",
          "时效性: 现行有效",
          "实施日期: 2017年07月01日",
        ],
      },
      {
        key: randomNumber(),
        title: "第一章 总则",
        content: [
          {
            key: randomNumber(),
            title: "第一条",
            content:
              "为促进汽车市场健康发展，维护公平公正的市场秩序，保护消费者合法权益，根据国家有关法律、行政法规，制定本办法。",
          },
          {
            key: randomNumber(),
            title: "第二条",
            content:
              "在中华人民共和国境内从事汽车销售及其相关服务活动，适用本办法。 从事汽车销售及其相关服务活动应当遵循合法、自愿、公平、诚信的原则。",
          },
          {
            key: randomNumber(),
            title: "第九条",
            refer: "被1篇普通案例引用",
            content:
              "供应商、经销商销售汽车、配件及其他相关产品应当符合国家有关规定和标准，不得销售国家法律、法规禁止交易的产品。",
          },
        ],
      },
      {
        key: randomNumber(),
        title: "第二章 销售行为规范",
        content: [
          {
            key: randomNumber(),
            title: "第一条",
            content:
              "为促进汽车市场健康发展，维护公平公正的市场秩序，保护消费者合法权益，根据国家有关法律、行政法规，制定本办法。",
          },
          {
            key: randomNumber(),
            title: "第二条",
            content:
              "在中华人民共和国境内从事汽车销售及其相关服务活动，适用本办法。 从事汽车销售及其相关服务活动应当遵循合法、自愿、公平、诚信的原则。",
          },
          {
            key: randomNumber(),
            title: "第九条",
            refer: "被1篇普通案例引用",
            content:
              "供应商、经销商销售汽车、配件及其他相关产品应当符合国家有关规定和标准，不得销售国家法律、法规禁止交易的产品。",
          },
        ],
      },
      {
        key: randomNumber(),
        title: "第三章 销售市场秩序",
        content: [
          {
            key: randomNumber(),
            title: "第一条",
            content:
              "为促进汽车市场健康发展，维护公平公正的市场秩序，保护消费者合法权益，根据国家有关法律、行政法规，制定本办法。",
          },
          {
            key: randomNumber(),
            title: "第二条",
            content:
              "在中华人民共和国境内从事汽车销售及其相关服务活动，适用本办法。 从事汽车销售及其相关服务活动应当遵循合法、自愿、公平、诚信的原则。",
          },
          {
            key: randomNumber(),
            title: "第九条",
            refer: "被1篇普通案例引用",
            content:
              "供应商、经销商销售汽车、配件及其他相关产品应当符合国家有关规定和标准，不得销售国家法律、法规禁止交易的产品。",
          },
        ],
      },
      {
        key: randomNumber(),
        title: "第四章 监督管理",
        content: [
          {
            key: randomNumber(),
            title: "第一条",
            content:
              "为促进汽车市场健康发展，维护公平公正的市场秩序，保护消费者合法权益，根据国家有关法律、行政法规，制定本办法。",
          },
          {
            key: randomNumber(),
            title: "第二条",
            content:
              "在中华人民共和国境内从事汽车销售及其相关服务活动，适用本办法。 从事汽车销售及其相关服务活动应当遵循合法、自愿、公平、诚信的原则。",
          },
          {
            key: randomNumber(),
            title: "第九条",
            refer: "被1篇普通案例引用",
            content:
              "供应商、经销商销售汽车、配件及其他相关产品应当符合国家有关规定和标准，不得销售国家法律、法规禁止交易的产品。",
          },
        ],
      },
      {
        key: randomNumber(),
        title: "第五章 法律责任",
        content: [
          {
            key: randomNumber(),
            title: "第一条",
            content:
              "为促进汽车市场健康发展，维护公平公正的市场秩序，保护消费者合法权益，根据国家有关法律、行政法规，制定本办法。",
          },
          {
            key: randomNumber(),
            title: "第二条",
            content:
              "在中华人民共和国境内从事汽车销售及其相关服务活动，适用本办法。 从事汽车销售及其相关服务活动应当遵循合法、自愿、公平、诚信的原则。",
          },
          {
            key: randomNumber(),
            title: "第九条",
            refer: "被1篇普通案例引用",
            content:
              "供应商、经销商销售汽车、配件及其他相关产品应当符合国家有关规定和标准，不得销售国家法律、法规禁止交易的产品。",
          },
        ],
      },
      {
        key: randomNumber(),
        title: "第六章 附则",
        content: [
          {
            key: randomNumber(),
            title: "第一条",
            content:
              "为促进汽车市场健康发展，维护公平公正的市场秩序，保护消费者合法权益，根据国家有关法律、行政法规，制定本办法。",
          },
          {
            key: randomNumber(),
            title: "第二条",
            content:
              "在中华人民共和国境内从事汽车销售及其相关服务活动，适用本办法。 从事汽车销售及其相关服务活动应当遵循合法、自愿、公平、诚信的原则。",
          },
          {
            key: randomNumber(),
            title: "第九条",
            refer: "被1篇普通案例引用",
            content:
              "供应商、经销商销售汽车、配件及其他相关产品应当符合国家有关规定和标准，不得销售国家法律、法规禁止交易的产品。",
          },
        ],
      },
    ];
  }, []);

  if (loading) {
    return <Skeleton />;
  }

  return (
    <div className="flex flex-col justify-start w-full min-h-full py-[24px] px-[22px] bg-[#f8faff]">
      <div className="bg-white min-h-full w-full flex flex-row items-start">
        <div className="flex-1 min-w-0 flex flex-col justify-start px-[60px]">
          <div className="sticky top-0 bg-white">
            <h1 className="text-[24px] font-[700] text-center py-[30px]">
              {data?.data?.result?.title}
            </h1>
            <div
              className="flex flex-row justify-end pb-[16px]"
              style={{ borderBottom: "1px solid #d9d9d9" }}
            >
              <Radio.Group
                value={type}
                onChange={(e) => setType(e.target.value)}
                size="large"
              >
                <Radio.Button value="1">
                  <div className="flex flex-row items-center">
                    {type === "1" ? (
                      <img src="/images/fegmentActive.svg" />
                    ) : (
                      <img src="/images/fegment.svg" />
                    )}
                    标注模式
                  </div>
                </Radio.Button>
                <Radio.Button value="2">
                  <div className="flex flex-row items-center">
                    {type === "2" ? (
                      <img src="/images/originActive.svg" />
                    ) : (
                      <img src="/images/origin.svg" />
                    )}
                    纯净模式
                  </div>
                </Radio.Button>
              </Radio.Group>
            </div>
          </div>

          <div className="py-[20px]">
            {type === "1" && (
              <div className="caseSegments">
                {titleAndContent.map((item: any, i: number) => {
                  let content: any = null;

                  if (Array.isArray(item.content) && item.content?.length > 0) {
                    content = item.content.map((child, i) => {
                      if (child.key && child.content) {
                        return (
                          <React.Fragment key={child.key}>
                            <div className="articleTitle">
                              <span className="title"> {child.title}</span>
                              {child.refer && (
                                <div className="lawRefer">
                                  <span>{child.refer}</span>
                                </div>
                              )}
                            </div>
                            <div>{child.content}</div>
                          </React.Fragment>
                        );
                      }

                      return <span key={i}>{child}</span>;
                    });
                  } else {
                    content = <span>{item.content}</span>;
                  }

                  return (
                    <section
                      key={item.key}
                      id={item.key}
                      className="segment-section"
                    >
                      {i === 0 && (
                        <div className="segmentTitle">{item.title}</div>
                      )}
                      {i > 0 && (
                        <div className="chapter segment">{item.title}</div>
                      )}
                      <p className="segmentContent">{content}</p>
                    </section>
                  );
                })}
              </div>
            )}
            {type === "2" && (
              <div
                className="markdownContent markdown-body "
                dangerouslySetInnerHTML={{
                  __html: data?.data?.result?.markdown_html,
                }}
              ></div>
            )}
          </div>
        </div>
        <div className="w-[226px] pt-[72px] sticky top-0 bg-white">
          <Anchor
            affix={false}
            offsetTop={170}
            items={titleAndContent?.map((item) => {
              return {
                key: item.key,
                href: "#" + item.key,
                title: item.title,
              };
            })}
          />
        </div>
      </div>
    </div>
  );
}
